<template>
  <div class="report-platform-container">
    <!-- 顶部工具栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <!-- <el-button @click="addPage" icon="el-icon-plus" size="small">新增页面</el-button>
        <el-button @click="deletePage" :disabled="pages.length <= 1" icon="el-icon-delete" size="small">删除页面</el-button> -->
        <!-- <el-divider direction="vertical"></el-divider> -->
        <el-button @click="previewMode = !previewMode" :type="previewMode ? 'primary' : 'default'" size="small">
          {{ previewMode ? '退出预览' : '预览' }}
        </el-button>
        <el-button @click="saveProject" icon="el-icon-document" size="small">保存</el-button>
      </div>
      <div class="toolbar-center">
        <span class="project-title">编辑器</span>
      </div>
      <!-- <div class="toolbar-right">
        <el-button @click="exportProject" icon="el-icon-download" size="small">导出</el-button>
      </div> -->
    </div>

    <div class="main-content" v-if="!previewMode">
      <!-- 左侧组件面板 -->
      <div class="left-panel">
        <div class="panel-header">组件库</div>
        <div class="components-list">
          <div class="component-category">
            <div class="category-title">基础组件</div>
            <div 
              class="component-item" 
              v-for="component in basicComponents" 
              :key="component.type"
              draggable="true"
              @dragstart="onDragStart($event, component)"
            >
              <i :class="component.icon"></i>
              <span>{{ component.name }}</span>
            </div>
          </div>
          <div class="component-category">
            <div class="category-title">地图组件</div>
            <div 
              class="component-item" 
              v-for="component in mapComponents" 
              :key="component.type"
              draggable="true"
              @dragstart="onDragStart($event, component)"
            >
              <i :class="component.icon"></i>
              <span>{{ component.name }}</span>
            </div>
          </div>
          <div class="component-category">
            <div class="category-title">图形组件</div>
            <div 
              class="component-item" 
              v-for="component in shapeComponents" 
              :key="component.type"
              draggable="true"
              @dragstart="onDragStart($event, component)"
            >
              <i :class="component.icon"></i>
              <span>{{ component.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 中间画布区域 -->
      <div class="canvas-area">
        <!-- 页面标签 -->
        <div class="page-tabs">
          <template v-for="(page, index) in pages">
            <!-- 插入指示器 -->
            <div 
              v-if="dragState.isDragging && dragState.dropIndex === index && dragState.dragIndex !== index"
              class="drop-indicator"
              :key="`indicator-${index}`"
            ></div>
            
            <div 
              class="page-tab"
              :key="page.id"
              :class="{ 
                active: currentPageIndex === index,
                dragging: dragState.isDragging && dragState.dragIndex === index,
                'drop-target': dragState.isDragging && dragState.dropIndex === index
              }"
              draggable="true"
              @click="switchPage(index)"
              @dragstart="onTabDragStart($event, index)"
              @dragover="onTabDragOver($event, index)"
              @dragenter="onTabDragEnter($event, index)"
              @dragleave="onTabDragLeave($event, index)"
              @drop="onTabDrop($event, index)"
              @dragend="onTabDragEnd"
            >
              <span>页面 {{ index + 1 }}</span>
              <i 
                v-if="pages.length > 1" 
                class="el-icon-close" 
                @click.stop="deletePageByIndex(index)"
              ></i>
            </div>
          </template>
          
          <!-- 最后一个位置的插入指示器 -->
          <div 
            v-if="dragState.isDragging && dragState.dropIndex === pages.length"
            class="drop-indicator"
            key="indicator-last"
          ></div>
          
          <div class="add-page-btn" @click="addPage">
            <i class="el-icon-plus"></i>
          </div>
        </div>

        <!-- 画布 -->
        <div class="canvas-wrapper">
          <div 
            class="canvas"
            ref="canvas"
            :style="canvasStyle"
            @drop="onDrop"
            @dragover.prevent
            @click="selectComponent(null)"
          >
            <!-- 添加组件提示 -->
            <div v-if="currentPage.components.length === 0" class="canvas-placeholder">
              <div class="placeholder-content">
                <i class="el-icon-plus"></i>
                <p>拖拽左侧组件到此处开始创建</p>
              </div>
            </div>

            <!-- 渲染页面组件 -->
            <CanvasComponent
              v-for="component in currentPage.components"
              :key="component.id"
              :component="component"
              :selected="selectedComponent && selectedComponent.id === component.id"
              :editing="editingComponent === component.id"
              @select="selectComponent"
              @start-edit="startEdit"
              @finish-edit="finishEdit"
              @start-drag="startDrag"
              @start-resize="startResize"
            />
          </div>
        </div>
      </div>

      <!-- 右侧属性面板 -->
      <div class="right-panel">
        <div class="panel-header">属性设置</div>
        <PropertyPanel 
          v-if="selectedComponent"
          :component="selectedComponent"
          @select-image="selectImage"
          @duplicate="duplicateComponent"
          @delete="deleteComponent"
        />
        <div v-else class="no-selection">
          <p>选择一个组件以编辑其属性</p>
        </div>
      </div>
    </div>

    <!-- 预览模式 -->
    <PreviewMode 
      v-if="previewMode"
      :pages="pages"
      :current-page-index="currentPageIndex"
      :canvas-style="canvasStyle"
      @prev-page="prevPage"
      @next-page="nextPage"
    />

    <!-- 图片选择对话框 -->
    <input 
      type="file" 
      ref="fileInput" 
      style="display: none" 
      accept="image/*" 
      @change="handleImageUpload"
    />
  </div>
</template>

<script>
import CanvasComponent from './components/CanvasComponent.vue'
import PropertyPanel from './components/PropertyPanel.vue'
import PreviewMode from './components/PreviewMode.vue'

export default {
  name: 'ReportPlatform',
  components: {
    CanvasComponent,
    PropertyPanel,
    PreviewMode
  },
  data() {
    return {
      previewMode: false,
      currentPageIndex: 0,
      selectedComponent: null,
      editingComponent: null,
      dragData: null,
      isResizing: false,
      isDragging: false,
      resizeDirection: '',
      dragStartPos: { x: 0, y: 0 },
      componentStartPos: { x: 0, y: 0 },
      componentStartSize: { width: 0, height: 0 },
      
      // 页面标签拖拽状态
      dragState: {
        isDragging: false,
        dragIndex: -1,
        dropIndex: -1,
        draggedPage: null
      },
      
      // 页面数据
      pages: [
        {
          id: 1,
          name: '页面1',
          components: []
        }
      ],

      // 组件库定义
      basicComponents: [
        { type: 'text', name: '文本', icon: 'el-icon-edit' },
        { type: 'image', name: '图片', icon: 'el-icon-picture' }
      ],
      mapComponents: [
        { type: 'map', name: '地图', icon: 'el-icon-location' },
        { type: 'compass', name: '指北针', icon: 'el-icon-position' },
        { type: 'scale', name: '比例尺', icon: 'el-icon-ruler' }
      ],
      shapeComponents: [
        { type: 'rectangle', name: '矩形', icon: 'el-icon-minus' },
        { type: 'circle', name: '圆形', icon: 'el-icon-remove' },
        { type: 'triangle', name: '三角形', icon: 'el-icon-caret-top' }
      ]
    }
  },
  computed: {
    currentPage() {
      return this.pages[this.currentPageIndex] || this.pages[0]
    },
    canvasStyle() {
      return {
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'flex-start',
        alignItems: 'flex-start',
        flexWrap: 'wrap',
        width: '100%',
        height: '100%',
        backgroundColor: '#ffffff',
        position: 'relative',
        padding: '20px',
        boxSizing: 'border-box'
      }
    }
  },
  mounted() {
    // 绑定全局事件
    document.addEventListener('mousemove', this.onMouseMove)
    document.addEventListener('mouseup', this.onMouseUp)
    document.addEventListener('keydown', this.onKeyDown)
  },
  beforeDestroy() {
    // 解绑全局事件
    document.removeEventListener('mousemove', this.onMouseMove)
    document.removeEventListener('mouseup', this.onMouseUp)
    document.removeEventListener('keydown', this.onKeyDown)
  },
  methods: {
    // 页面管理
    addPage() {
      const newPage = {
        id: Date.now(),
        name: `页面${this.pages.length + 1}`,
        components: []
      }
      this.pages.push(newPage)
      this.currentPageIndex = this.pages.length - 1
    },
    deletePage() {
      if (this.pages.length > 1) {
        this.pages.splice(this.currentPageIndex, 1)
        if (this.currentPageIndex >= this.pages.length) {
          this.currentPageIndex = this.pages.length - 1
        }
        this.selectedComponent = null
      }
    },
    deletePageByIndex(index) {
      if (this.pages.length > 1) {
        this.pages.splice(index, 1)
        if (this.currentPageIndex >= this.pages.length) {
          this.currentPageIndex = this.pages.length - 1
        } else if (index <= this.currentPageIndex) {
          this.currentPageIndex = Math.max(0, this.currentPageIndex - 1)
        }
        this.selectedComponent = null
      }
    },
    switchPage(index) {
      this.currentPageIndex = index
      this.selectedComponent = null
      this.editingComponent = null
    },
    prevPage() {
      if (this.currentPageIndex > 0) {
        this.currentPageIndex--
      }
    },
    nextPage() {
      if (this.currentPageIndex < this.pages.length - 1) {
        this.currentPageIndex++
      }
    },

    // 页面标签拖拽功能
    onTabDragStart(event, index) {
      this.dragState.isDragging = true
      this.dragState.dragIndex = index
      this.dragState.draggedPage = this.pages[index]
      
      // 设置拖拽效果
      event.dataTransfer.effectAllowed = 'move'
      event.dataTransfer.setData('text/html', event.target.outerHTML)
      
      // 添加拖拽样式
      event.target.style.opacity = '0.5'
    },
    
    onTabDragOver(event, index) {
      event.preventDefault()
      event.dataTransfer.dropEffect = 'move'
      
      // 根据鼠标位置确定插入位置
      const rect = event.currentTarget.getBoundingClientRect()
      const midPoint = rect.left + rect.width / 2
      const isAfter = event.clientX > midPoint
      
      if (this.dragState.isDragging && this.dragState.dragIndex !== index) {
        this.dragState.dropIndex = isAfter ? index + 1 : index
      }
    },
    
    onTabDragEnter(event, index) {
      event.preventDefault()
      if (this.dragState.isDragging && this.dragState.dragIndex !== index) {
        // 根据鼠标位置确定插入位置
        const rect = event.currentTarget.getBoundingClientRect()
        const midPoint = rect.left + rect.width / 2
        const isAfter = event.clientX > midPoint
        
        this.dragState.dropIndex = isAfter ? index + 1 : index
      }
    },
    
    onTabDragLeave(event, index) {
      // 只有在真正离开元素时才清除dropIndex
      if (!event.currentTarget.contains(event.relatedTarget)) {
        if (this.dragState.dropIndex === index) {
          this.dragState.dropIndex = -1
        }
      }
    },
    
    onTabDrop(event, index) {
      event.preventDefault()
      
      if (this.dragState.isDragging && this.dragState.dropIndex !== -1) {
        let targetIndex = this.dragState.dropIndex
        
        // 如果拖拽到自己后面的位置，需要调整索引
        if (this.dragState.dragIndex < targetIndex) {
          targetIndex = targetIndex - 1
        }
        
        // 执行页面重排序
        this.reorderPages(this.dragState.dragIndex, targetIndex)
      }
    },
    
    onTabDragEnd(event) {
      // 恢复拖拽元素样式
      event.target.style.opacity = '1'
      
      // 重置拖拽状态
      this.dragState.isDragging = false
      this.dragState.dragIndex = -1
      this.dragState.dropIndex = -1
      this.dragState.draggedPage = null
    },
    
    reorderPages(fromIndex, toIndex) {
      console.log('Starting reorder:', { 
        from: fromIndex, 
        to: toIndex, 
        currentPageIndex: this.currentPageIndex,
        pagesBefore: this.pages.map((p, i) => ({ index: i, name: p.name, id: p.id }))
      })
      
      // 创建新的页面数组
      const newPages = [...this.pages]
      
      // 移除被拖拽的页面
      const [draggedPage] = newPages.splice(fromIndex, 1)
      
      // 插入到新位置
      newPages.splice(toIndex, 0, draggedPage)
      
      // 更新页面名称以反映新的顺序
      newPages.forEach((page, index) => {
        page.name = `页面${index + 1}`
      })
      
      // 更新页面数组
      this.pages = newPages
      
      // 更新当前页面索引
      if (this.currentPageIndex === fromIndex) {
        // 如果拖拽的是当前页面，更新当前页面索引
        this.currentPageIndex = toIndex
      } else if (fromIndex < this.currentPageIndex && toIndex >= this.currentPageIndex) {
        // 从前面拖到后面，当前页面索引前移
        this.currentPageIndex--
      } else if (fromIndex > this.currentPageIndex && toIndex <= this.currentPageIndex) {
        // 从后面拖到前面，当前页面索引后移
        this.currentPageIndex++
      }
      
      console.log('Pages reordered successfully:', {
        from: fromIndex,
        to: toIndex,
        newCurrentIndex: this.currentPageIndex,
        pagesAfter: this.pages.map((p, i) => ({ index: i, name: p.name, id: p.id }))
      })
      
      // 强制更新视图
      this.$forceUpdate()
    },

    // 拖拽功能
    onDragStart(event, component) {
      this.dragData = { ...component }
      event.dataTransfer.effectAllowed = 'copy'
    },
    onDrop(event) {
      event.preventDefault()
      if (!this.dragData) return

      const canvas = this.$refs.canvas
      const rect = canvas.getBoundingClientRect()
      const x = event.clientX - rect.left
      const y = event.clientY - rect.top

      this.addComponent(this.dragData, x, y)
      this.dragData = null
    },

    // 组件管理
    addComponent(componentType, x, y) {
      const component = this.createComponent(componentType, x, y)
      this.currentPage.components.push(component)
      this.selectedComponent = component
    },
    
    createComponent(componentType, x, y) {
      const component = {
        id: Date.now(),
        type: componentType.type,
        x: x - 50,
        y: y - 25,
        width: 100,
        height: 50,
        backgroundColor: '#f0f0f0',
        borderColor: '#d0d0d0',
        borderWidth: 1,
        opacity: 1,
        fontSize: 14,
        textColor: '#333333',
        textAlign: 'center'
      }

      // 根据组件类型设置默认属性
      this.setComponentDefaults(component, componentType.type)
      return component
    },
    
    setComponentDefaults(component, type) {
      switch (type) {
        case 'text':
          Object.assign(component, {
            content: '双击编辑文本',
            width: 150,
            height: 30,
            backgroundColor: 'transparent',
            borderWidth: 0
          })
          break
        case 'image':
          Object.assign(component, {
            width: 200,
            height: 150,
            src: ''
          })
          break
        case 'map':
          Object.assign(component, {
            width: 300,
            height: 200,
            backgroundColor: '#e8f4fd'
          })
          break
        case 'compass':
          Object.assign(component, {
            width: 60,
            height: 60,
            backgroundColor: 'transparent',
            borderWidth: 0
          })
          break
        case 'scale':
          Object.assign(component, {
            width: 150,
            height: 30,
            backgroundColor: 'transparent',
            borderWidth: 0,
            scaleText: '0 100 200 300m'
          })
          break
        case 'rectangle':
          Object.assign(component, {
            width: 120,
            height: 80,
            backgroundColor: '#4CAF50',
            text: ''
          })
          break
        case 'circle':
          Object.assign(component, {
            width: 100,
            height: 100,
            backgroundColor: '#2196F3',
            text: ''
          })
          break
        case 'triangle':
          Object.assign(component, {
            width: 100,
            height: 100,
            backgroundColor: '#FF9800',
            text: ''
          })
          break
      }
    },

    selectComponent(component) {
      this.selectedComponent = component
      this.editingComponent = null
    },
    deleteComponent() {
      if (this.selectedComponent) {
        const index = this.currentPage.components.findIndex(
          c => c.id === this.selectedComponent.id
        )
        if (index > -1) {
          this.currentPage.components.splice(index, 1)
          this.selectedComponent = null
        }
      }
    },
    duplicateComponent() {
      if (this.selectedComponent) {
        const newComponent = {
          ...this.selectedComponent,
          id: Date.now(),
          x: this.selectedComponent.x + 20,
          y: this.selectedComponent.y + 20
        }
        this.currentPage.components.push(newComponent)
        this.selectedComponent = newComponent
      }
    },

    // 文本编辑
    startEdit(component) {
      this.editingComponent = component.id
    },
    finishEdit(component, content) {
      if (component.type === 'text') {
        component.content = content
      } else {
        component.text = content
      }
      this.editingComponent = null
    },

    // 拖拽移动和调整大小
    startDrag(event, component) {
      if (this.editingComponent) return
      
      this.isDragging = true
      this.selectedComponent = component
      this.dragStartPos = { x: event.clientX, y: event.clientY }
      this.componentStartPos = { x: component.x, y: component.y }
      event.preventDefault()
    },
    startResize(event, direction) {
      this.isResizing = true
      this.resizeDirection = direction
      this.dragStartPos = { x: event.clientX, y: event.clientY }
      this.componentStartPos = { 
        x: this.selectedComponent.x, 
        y: this.selectedComponent.y 
      }
      this.componentStartSize = { 
        width: this.selectedComponent.width, 
        height: this.selectedComponent.height 
      }
      event.preventDefault()
    },

    // 鼠标事件
    onMouseMove(event) {
      if (this.isDragging && this.selectedComponent) {
        const dx = event.clientX - this.dragStartPos.x
        const dy = event.clientY - this.dragStartPos.y
        this.selectedComponent.x = this.componentStartPos.x + dx
        this.selectedComponent.y = this.componentStartPos.y + dy
      } else if (this.isResizing && this.selectedComponent) {
        this.handleResize(event)
      }
    },
    onMouseUp() {
      this.isDragging = false
      this.isResizing = false
      this.resizeDirection = ''
    },
    onKeyDown(event) {
      if (event.key === 'Delete' && this.selectedComponent) {
        this.deleteComponent()
      } else if (event.key === 'Escape') {
        this.selectedComponent = null
        this.editingComponent = null
      }
    },

    handleResize(event) {
      const dx = event.clientX - this.dragStartPos.x
      const dy = event.clientY - this.dragStartPos.y
      
      let newWidth = this.componentStartSize.width
      let newHeight = this.componentStartSize.height
      let newX = this.componentStartPos.x
      let newY = this.componentStartPos.y

      switch (this.resizeDirection) {
        case 'se':
          newWidth = this.componentStartSize.width + dx
          newHeight = this.componentStartSize.height + dy
          break
        case 'sw':
          newWidth = this.componentStartSize.width - dx
          newHeight = this.componentStartSize.height + dy
          newX = this.componentStartPos.x + dx
          break
        case 'ne':
          newWidth = this.componentStartSize.width + dx
          newHeight = this.componentStartSize.height - dy
          newY = this.componentStartPos.y + dy
          break
        case 'nw':
          newWidth = this.componentStartSize.width - dx
          newHeight = this.componentStartSize.height - dy
          newX = this.componentStartPos.x + dx
          newY = this.componentStartPos.y + dy
          break
      }

      if (newWidth >= 20) {
        this.selectedComponent.width = newWidth
        this.selectedComponent.x = newX
      }
      if (newHeight >= 20) {
        this.selectedComponent.height = newHeight
        this.selectedComponent.y = newY
      }
    },

    // 图片选择
    selectImage() {
      this.$refs.fileInput.click()
    },
    handleImageUpload(event) {
      const file = event.target.files[0]
      if (file && this.selectedComponent) {
        const reader = new FileReader()
        reader.onload = (e) => {
          this.selectedComponent.src = e.target.result
        }
        reader.readAsDataURL(file)
      }
    },

    // 项目管理
    saveProject() {
      const projectData = {
        pages: this.pages,
        timestamp: new Date().toISOString()
      }

      console.log('projectData', projectData)
      localStorage.setItem('reportPlatformProject', JSON.stringify(projectData))
      this.$message.success('项目已保存')
    },
    exportProject() {
      const projectData = {
        pages: this.pages,
        timestamp: new Date().toISOString()
      }
      
      const blob = new Blob([JSON.stringify(projectData, null, 2)], { 
        type: 'application/json' 
      })
      const url = URL.createObjectURL(blob)
      const link = document.createElement('a')
      link.href = url
      link.download = `汇报平台_${new Date().toISOString().slice(0, 10)}.json`
      link.click()
      URL.revokeObjectURL(url)
      
      this.$message.success('项目已导出')
    }
  },
  created() {
    // 尝试从本地存储加载项目
    const savedProject = localStorage.getItem('reportPlatformProject')
    if (savedProject) {
      try {
        const projectData = JSON.parse(savedProject)
        if (projectData.pages && projectData.pages.length > 0) {
          this.pages = projectData.pages
        }
      } catch (error) {
        console.error('加载保存的项目失败:', error)
      }
    }
  }
}
</script>

<style scoped>
/* 主要样式 */
.report-platform-container {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
}

.toolbar {
  height: 50px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  justify-content: space-between;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.project-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.main-content {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.left-panel {
  width: 250px;
  background: #ffffff;
  border-right: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
}

.panel-header {
  height: 40px;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  padding: 0 15px;
  font-weight: 600;
  color: #333;
}

.components-list {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.component-category {
  margin-bottom: 20px;
}

.category-title {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
}

.component-item {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 5px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  cursor: grab;
  transition: all 0.2s;
}

.component-item:hover {
  background: #e3f2fd;
  border-color: #2196F3;
}

.component-item i {
  margin-right: 8px;
  color: #666;
}

.canvas-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #f0f0f0;
}

.page-tabs {
  height: 40px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  padding: 0 10px;
  overflow-x: auto;
}

.page-tab {
  display: flex;
  align-items: center;
  padding: 5px 12px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px 4px 0 0;
  margin-right: 5px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
}

.page-tab.active {
  background: #ffffff;
  border-bottom-color: #ffffff;
  z-index: 1;
}

.page-tab.dragging {
  opacity: 0.5;
  transform: scale(0.95);
  cursor: grabbing;
}

.page-tab.drop-target {
  background: #e3f2fd;
  border-color: #2196f3;
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.page-tab:hover {
  background: #e8f5e8;
  border-color: #4caf50;
}

.page-tab.active:hover {
  background: #ffffff;
  border-color: #e0e0e0;
}

.page-tab i {
  font-size: 12px;
  color: #999;
  margin-left: 5px;
}

.drop-indicator {
  width: 3px;
  height: 30px;
  background: #2196f3;
  border-radius: 2px;
  margin: 0 2px;
  animation: pulse 1s infinite;
  box-shadow: 0 0 6px rgba(33, 150, 243, 0.6);
}

@keyframes pulse {
  0% { opacity: 0.6; transform: scaleY(0.8); }
  50% { opacity: 1; transform: scaleY(1.2); }
  100% { opacity: 0.6; transform: scaleY(0.8); }
}

.add-page-btn {
  width: 30px;
  height: 30px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.add-page-btn:hover {
  background: #e3f2fd;
  border-color: #2196F3;
  color: #2196F3;
}

.canvas-wrapper {
  flex: 1;
  padding: 20px;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.canvas {
  background: #ffffff;
  border: 1px solid #d0d0d0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: default;
  overflow: hidden;
}

.canvas-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
}

.placeholder-content {
  text-align: center;
}

.placeholder-content i {
  font-size: 48px;
  margin-bottom: 10px;
  display: block;
}

.right-panel {
  width: 300px;
  background: #ffffff;
  border-left: 1px solid #e0e0e0;
  display: flex;
  flex-direction: column;
}

.no-selection {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-style: italic;
}
</style>
